<template>
	<!-- 话题列表 -->
	<view>
		<mescroll-uni @init="mescrollInit" :height="height + 'px'"  :down="downOptions" :up="upOptions" @up="upBack">

			<!-- 话题 -->
			<view v-if="dataList.length > 0">
				<view class="user_parent_box" v-for="(item, index) in dataList" :key="index" @click="gotoUserHome(item.username)">
					<view class="user_box">
						<image class="user_cover" :src="item.avatar" mode="aspectFill"></image>
						<view class="info_box">
							<view style="display: flex;">
								<text class="user_title"> {{item.displayName}} </text>
								<image v-if="item.sex == 1" class="user_gender_icon"  src="/static/icon/gender_m.png"></image>
								<image v-if="item.sex == 0" class="user_gender_icon"  src="/static/icon/gender_w.png"></image>
							</view>

							<text class="user_id">ID: {{item.username}} </text>
						</view>
					</view>
				</view>
			</view>

			<no-data v-else :height="height" icon="/static/bg/cat_qz.png" :iconMarginTop="100">
			</no-data>


			<u-toast ref="uToast"></u-toast>


		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		props: {
			height: [Number, String],
			keyword: [String],
		},
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		components: {
			NoData
		},
		data() {
			return {
				downOptions: {
					use: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
					toTop: {
						src: ''
					}
				},
				// 是否已加载过数据
				isLoaded: false,
				// 当前页
				currentPage: 1,
				// 分页大小
				pageSize: 12,
				// 数据
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,
			}
		},
		watch: {
			keyword(){
				this.isLoaded = false
			}
		},
		methods: {
			initData() {
				if(this.isLoaded){
					return
				}
				this.currentPage = 1
				this.pageSize = 12
				this.getUserList()
			},
			// 获取列表数据
			getUserList() {
				if (this.loading || !this.keyword) {
					return
				}
				let form = {
					page: this.currentPage,
					size: this.pageSize,
					keyword: this.keyword
				}
				this.isLoaded =  true
				this.loading = true
				this.$httpApi.baseUserGet('open/user/search', form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList = data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length, !this.noMore);
						this.$emit("countBack",3,data.data.total)
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多
			getMoreList() {
				if (this.loading || this.noMore || !this.keyword) {
					return
				}
				let form = {
					page: this.currentPage + 1,
					size: this.pageSize,
					keyword: this.keyword
				}
				this.isLoaded =  true
				this.loading = true
				this.$httpApi.baseUserGet('open/user/search', form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						if (data.data.records && data.data.records.length > 0) {
							this.currentPage += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length, !this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			/**
			 * 上拉加载的回调
			 */
			upBack(page) {
				if (!this.loading && !this.noMore && this.keyword) {
					this.getMoreList()
				}else{
					this.mescroll.endErr()
				}
			},
			// 前往详情
			gotoUserHome(username) {
				uni.navigateTo({
					url: '/pages/center/homePage?id='+username
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	// 话题显示样式
	.user_parent_box {
		display: flex;
		flex-flow: column;
		margin-left: 2px;
		padding: 6px 15px;
		background-color: #FFFFFF;
		margin-top: 2px;
	}

	.user_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	// 话题图片
	.user_cover {
		width: 54px;
		height: 54px;
		border-radius: 10px;
		margin-top: 4px;
		margin-right: 10px;
	}

	// 话题信息
	.info_box {
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	// 名称
	.user_title {
		font-size: 16px;
		line-height: 18px;
		color: #333333;
		margin-top: 12px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}
	// 话题名称
	.user_id {
		flex: 1;
		font-size: 13px;
		line-height: 14px;
		color: #676767;
		margin-top: 8px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}
	.user_gender_icon{
		margin-top: 12px;
		width: 20px;
		height: 20px;
	}
</style>
